<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="11" :xs="24">
        <!-- <div class="el-dialog-div"> -->
        <el-select v-model="productType" placeholder="图表类型" clearable>
          <el-option label="柱状图" value="bar" />
          <el-option label="折线图" value="line" />
        </el-select>

        <el-input
          v-model="input"
          placeholder="请输入内容"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 12 }"
          :style="{ width: '100%' }"
        />

        <el-form
          ref="form"
          :model="formData"
          label-position="top"
          :inline="true"
        >
          <!-- :style="{ width: '100%' }" -->
          <!-- <el-row> -->
          <!-- <el-form-item label="对话框" prop="input"> </el-form-item> -->
          <!-- </el-row> -->
          <el-form-item
            v-for="(item, index) in formData.libraryIdList"
            :key="index"
          >
            <el-select
              style="width: 200px"
              v-model="item.tableName"
              clearable
              filterable
              remote
              :remote-method="getDatacomment"
              placeholder="请输入表描述"
              allow-create
            >
              <el-option
                v-for="item in options"
                :key="item.tableName"
                :label="`${item.comment}`"
                :value="item.tableName"
              >
              </el-option>
            </el-select>
            <el-select
              style="width: 270px"
              v-model="item.tableName"
              clearable
              filterable
              remote
              :remote-method="gettableName"
              placeholder="数据库表名"
              allow-create
            >
              <el-option
                v-for="item in options"
                :key="item.tableName"
                :label="`${item.tableName}`"
                :value="item.tableName"
              >
              </el-option>
            </el-select>
            <!-- <el-input
              :disabled="true"
              style="width: 150px"
              v-model="item.comment"
              placeholder="请输入字段名"
            ></el-input>
          
            <el-input
              style="width: 150px"
              v-model="item.value"
              placeholder="请输入字段值"
            ></el-input> -->
            <!-- <span v-if="item.is_nullable == 'NO'">(必填)</span> -->
            <span
              v-if="formData.libraryIdList.length > 0"
              style="margin-left: 5px"
            >
              <el-button type="primary" size="mini" @click="addLibraryIdList"
                >新增</el-button
              >
              <el-button type="danger" size="mini" @click="delRow(item, index)"
                >删除</el-button
              >
              <el-button
                :icon="!isOpen ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
                size="mini"
                @click="selectRow(item)"
                >展开/收起</el-button
              >
            </span>
          </el-form-item>
        </el-form>
        <!-- </div> -->
        <!-- <div slot="footer" class="dialog-footer"> -->
        <div style="margin-bottom: 100px; text-align: center">
          <el-button size="mini" type="primary" @click="submitFormData"
            >确 定</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="reset"
            >重置</el-button
          >
        </div>
        <div v-if="isOpen">
          <Selfacting :row="row" @addComment="addComment" />
        </div>

        <!-- <el-button @click="cancel">取 消</el-button> -->
        <!-- </div> -->
      </el-col>
      <!--用户数据-->
      <el-col :span="13" :xs="24">
        <div class="el-dialog-div" style="margin-bottom: 15px">
          <!-- {{  }} -->
          <el-input
            v-model="msg"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 200 }"
            :style="{ width: '100%' }"
          />
        </div>
        <vueAfter :row="row" />
        <myCharts :options="echartData"></myCharts>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import vueAfter from "./vueAfter/index.vue";
import Selfacting from "./Selfacting/index.vue";
import myCharts from "./myCharts.vue";
import { selectTableNameList, getSqlFromGpt } from "@/api/conf/SysTableField";
export default {
  components: { vueAfter, Selfacting, myCharts },

  data() {
    return {
      isOpen: false,
      row: {},
      productType: "",
      //
      echartData: {},
      //SQL
      msg: "",
      input: "查询",

      options: [],
      formData: {
        libraryIdList: [{ tableName: "" }],
      },
    };
  },
  methods: {
    addComment(comment) {
      this.input = this.input + comment;
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载，请稍候！");
    },
    submitFormData() {
      if (!this.input) {
        this.$modal.msgError("请输入对话框内容");
        return;
      }
      if (!this.formData.libraryIdList[0].tableName) {
        this.$modal.msgError("请选择表");
        return;
      }
      let obj = {
        input: this.input,
        tableNameList: this.formData.libraryIdList.map(
          (item) => item.tableName
        ),
      };
      this.openLoading();
      getSqlFromGpt(obj).then((response) => {
        this.$modal.closeLoading();
        this.msg = response;
        // this.openmsg = true;
        if (this.productType == "bar") {
          this.echartData = {
            title: {
              text: "柱状图",
            },
            legend: {
              data: ["支出", "收入"],
            },
            tooltip: {},
            xAxis: {
              data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
            },
            yAxis: {},
            series: [
              {
                type: "bar",
                data: ["20", "30", "40", "50", "60", "70", "80"],
                name: "支出",
              },
              {
                type: "bar",
                data: ["20", "30", "40", "50", "60", "70", "80"],
                name: "收入",
              },
            ],
          };
        } else if (this.productType == "line") {
          this.echartData = {
            title: {
              text: "曲线图",
            },
            legend: {
              data: ["存款", "贷款"],
            },
            tooltip: {},
            xAxis: {
              data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
            },
            yAxis: {},
            series: [
              {
                type: "line",
                data: ["1220", "230", "4440", "5050", "1060", "1170", "2280"],
                name: "存款",
              },
              {
                type: "line",
                data: ["200", "300", "400", "500", "60", "700", "80"],
                name: "贷款",
              },
            ],
          };
        }
      });
    },
    changetableName(value) {
      const selectedOption = this.options.find(
        (option) => option.tableName === value
      );
      console.log(JSON.stringify(selectedOption)); // 这里就是整个选项对象
      // this.form.tableComment = selectedOption.comment;
    },
    getDatacomment(key) {
      selectTableNameList({ comment: key }).then((response) => {
        this.options = response;
      });
    },
    gettableName(key) {
      selectTableNameList({ tableName: key }).then((response) => {
        this.options = response;
      });
    },
    //添加库存名称
    addLibraryIdList() {
      if (this.formData.libraryIdList.length > 0) {
        let hasValue = false;
        for (let i = 0; i < this.formData.libraryIdList.length; i++) {
          if (!this.formData.libraryIdList[i].tableName) {
            hasValue = true;
            break;
          }
        }
        if (hasValue) {
          return this.$message.warning("请先选择未选择项");
        }
        this.formData.libraryIdList.push({
          tableName: "",
        });
      }
    },
    //库存名称删除
    delRow(item, index) {
      if (this.formData.libraryIdList.length > 1) {
        this.formData.libraryIdList.splice(index, 1);
      } else {
        this.$message.warning("至少选择一项");
      }
    },
    selectRow(item) {
      this.isOpen = !this.isOpen;

      let count = 0;
      count++;
      this.row = { ...item, count: count };
    },
    // 表单重置
    reset() {
      this.input = "";
      this.formData.libraryIdList = [{ tableName: "" }];
    },
  },
};
</script>

<style scoped>
.el-dialog-div {
  height: 40vh;
  overflow-x: hidden;
}
.chat-box {
  height: calc(100vh - 210px);
  overflow-y: auto;
  padding: 10px;
  border-bottom: 1px solid #dcdfe6;
}
.input-area {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.message {
  margin: 10px 0;
  display: flex;
  align-items: center;
}
.user-message,
.bot-message {
  margin-top: 2px;
  display: flex;
  align-items: center;
}
.avatar {
  border-radius: 50%;
  margin-right: 10px;
  width: 50px;
  height: 50px;
}
.input-field {
  flex: 1;
  margin-right: 10px;
  max-width: calc(100% - 100px);
}
.message-content {
  max-width: 100%; /* 确保消息内容框不超过聊天框宽度 */
  background-color: #f0f0f0; /* 随意选择背景颜色 */
  border-radius: 5px; /* 圆角 */
  padding: 10px; /* 内边距 */
  overflow-wrap: break-word; /* 使长文本换行 */
  white-space: normal; /* 允许文本在标签内换行 */
  word-wrap: break-word; /* 兼容旧版浏览器 */
}
.user-message-content {
  background-color: #d1e7dd; /* 用户消息的背景颜色 */
}
.bot-message-content {
  background-color: #cfe2ff; /* 机器人消息的背景颜色 */
}
</style>

